<template>
  <c-card isAffix class="share-card">
    <canvas id="shareCardId"> </canvas>
  </c-card>
</template>

<script setup name="system.user">
import { ref, onMounted } from 'vue';
import icUserAvatar from '@/assets/common/ic-user-avatar.jpg';

// user
import { useUserStore } from '@/pinia/modules/user.js';
const userStore = useUserStore();

const dpr = 1;
const canvas = ref();
const context = ref();

const canvasInfo = ref({ width: 0, height: 0 });

const avatarImgInfo = ref({ node: null, width: 0, height: 0 });

const onLoadImageEndSize = async (url) => {
  if (!url) return;
  return new Promise((resolve, reject) => {
    // let image = document.createElement('img');
    const image = new Image();
    image.crossOrigin = 'Anonymous'; // 加这句
    image.src = url;
    image.onload = () => resolve({ node: image, width: image.width, height: image.height });
    image.onerror = reject;
  });
};

function getTextWidth(text, font) {
  context.value.font = font;
  return Math.floor(context.value.measureText(text).width);
}

const initCanvas = () => {
  const cvs = document.getElementById('shareCardId');
  const ctx = cvs.getContext('2d');

  console.log(cvs, ctx, dpr);
  console.log(cvs.width, cvs.height, 'width height');
  console.log(cvs.clientWidth, cvs.clientHeight, 'clientWidth clientHeight');

  cvs.width = cvs.clientWidth * dpr;
  cvs.height = cvs.clientHeight * dpr;

  // context.value.scale(dpr, dpr);

  canvasInfo.value.width = cvs.width;
  canvasInfo.value.height = cvs.height;

  canvas.value = cvs;
  context.value = ctx;
};

const initDrawBg = () => {
  context.value.fillStyle = '#f5f5f5'; // 可以是颜色名称、十六进制码、rgb、rgba等
  // 绘制矩形，从(0,0)到canvas的宽和高
  context.value.fillRect(0, 0, canvasInfo.value.width, canvasInfo.value.height);
};

const initDrawBox = () => {
  context.value.beginPath();

  context.value.shadowBlur = 10;
  context.value.shadowColor = 'rgba(0, 0, 0, 0.1)';

  const spaceValue = 20;
  const { width, height } = canvasInfo.value;

  context.value.rect(
    spaceValue,
    spaceValue + 40,
    width - spaceValue * 2,
    height - spaceValue * 2 - 40,
  );
  context.value.fillStyle = '#eee';
  context.value.fill();
};

const initDrawImg = async () => {
  const imgData = await onLoadImageEndSize(icUserAvatar);
  avatarImgInfo.value.node = imgData.node;
  avatarImgInfo.value.width = imgData.width;
  avatarImgInfo.value.height = imgData.height;

  const drawSize = 80;
  const drawX = canvasInfo.value.width / 2 - drawSize / 2;
  const drawY = 20;

  context.value.beginPath();
  context.value.arc(drawX + drawSize / 2, drawY + drawSize / 2, drawSize / 2, 0, Math.PI * 2);
  // context.value.fillStyle = 'blue';
  context.value.fill();
  context.value.closePath();

  context.value.clip();

  // 绘制图片
  context.value.drawImage(imgData.node, drawX, drawY, drawSize, drawSize);
};

const initDrawFont = () => {
  const font = '30px Arial';
  const text = 'Hello, World!';

  // context.value.strokeStyle = '#FF0000'; // 设置描边颜色为红色
  // context.value.lineWidth = 1; // 设置线条宽度为2
  // context.value.strokeText('Hello, world!', 10, 50);

  var textWidth = getTextWidth(text, font); // 获取文字宽度

  console.log(textWidth, 'textHeight');

  context.value.font = 'bold 30px Arial';

  context.value.fillStyle = 'blue';
  context.value.fillText(text, (canvasInfo.value.width - textWidth) / 2, 160);
};

const startDraw = () => {
  initDrawBg();
  initDrawBox();
  initDrawImg();
  initDrawFont();
};

onMounted(() => {
  setTimeout(() => {
    initCanvas();
    startDraw();
  });
});
</script>

<style lang="scss" scoped>
.share-card {
  height: 100%;
}

#shareCardId {
  width: 500px;
  height: 400px;
}
</style>
